<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件代理/委托</title>
</head>
<body>
  <ul id="list">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <button id="btn">增加一项</button>
  </ul>
  <script>
    const list = document.getElementById('list')
    const lis = list.getElementsByTagName('li')
    const btn = document.getElementById('btn')
    const lisArray = [...lis] // Array.prototype.slice.call(lis) // lis是类数组集合，转换成数组

    // 绑定事件处理函数
    function addEvent(elem, type, fn) {
      elem.addEventListener(type, fn)
    }

    // 这种方式注册的事件，当list增加了新元素后，新元素要重新注册上事件才会有事件处理
    // 如果li元素很多，为每一个li注册事件的方式也会增加内存的消耗
    // lisArray.forEach(li => {
    //   addEvent(li, 'click', () => {
    //     alert(li.innerHTML)
    //   })
    // })

    btn.addEventListener('click', () => {
      const li = document.createElement('li')
      li.innerHTML = '新增项目'
      list.insertBefore(li, btn)
    })

    addEvent(list, 'click', (e) => {
      const target = e.target
      console.log(target)
      if (target.nodeName === 'LI') {
        alert(target.innerHTML)
      }      
    })
  </script>
</body>
</html>